<template>
	<div class="container">
		<img class="qrcode" :src="global.RESOURCE + '/img/qrcode.png'">
		<div class="qrcode-text">长按关注「久趣英语服务号」</div>
		<div class="qrcode-text2">如未成功关注服务号，将会影响您正常上课哦～</div>
		<div class="footer">如有疑问请在「久趣英语服务号」联系客服</div>
		<img class="footerRight" :src="global.RESOURCE + '/img/footerRight.png'">
		<div class="mask" v-show="status">
			<div class="user-info" v-show="status === 'user-info'">
				<div class="title">填写宝贝资料</div>
				<div class="form">
					<div class="form-group nickname-group">
						<label class="input-label" for="nickname">昵称</label>
						<input
							v-model="userInfo.nickname"
							id="nickname"
							name="nickname"
							class="nickname"
							type="text"
							placeholder="请输入英文昵称"
						>
						<div class="random" @click="userInfo.nickname = randomName(userInfo.gender)">随机</div>
					</div>
					<div class="form-group age-group">
						<label class="input-label">年龄</label>
						<input
							v-model="userInfo.birthday"
							id="birthday"
							name="birthday"
							type="date"
							class="age"
							placeholder="请选择孩子年龄"
						>
						<label for="birthday">{{age}}</label>
					</div>
					<div class="form-group sex-group">
						<label class="input-label">性别</label>
						<input v-model="userInfo.gender" id="boy" type="radio" name="sex" value="1" hidden>
						<label for="boy">男孩</label>
						<input v-model="userInfo.gender" id="girl" type="radio" name="sex" value="2" hidden>
						<label for="girl">女孩</label>
					</div>
					<div class="form-group pwd-group" v-show="userInfo.isPasswordSet">
						<label class="input-label" for="password">密码</label>
						<input
							v-model="userInfo.password"
							id="password"
							name="password"
							class="password"
							type="password"
							placeholder="请设置登录密码"
							maxlength="12"
						>
					</div>
				</div>
				<div class="submit" id="updateUserProfile" @click="submitUserInfo">完成</div>
			</div>
			<div class="survey" v-show="status === 'survey'">
				<div class="title">填写问卷调查</div>
				<div class="in-school">
					<div class="in-school-title">Q1. 校内学了几年英语</div>
					<div class="in-school-list">
						<input
							v-model.number="surveys.answer1"
							id="in-school-1"
							type="radio"
							name="in-school"
							value="0"
							hidden
						>
						<label for="in-school-1">没学过</label>
						<input
							v-model.number="surveys.answer1"
							id="in-school-2"
							type="radio"
							name="in-school"
							value="1"
							hidden
						>
						<label for="in-school-2">1年</label>
						<input
							v-model.number="surveys.answer1"
							id="in-school-3"
							type="radio"
							name="in-school"
							value="2"
							hidden
						>
						<label for="in-school-3">2年</label>
						<input
							v-model.number="surveys.answer1"
							id="in-school-4"
							type="radio"
							name="in-school"
							value="3"
							hidden
						>
						<label for="in-school-4" style="margin-right: 0;">3年</label>
						<input
							v-model.number="surveys.answer1"
							id="in-school-5"
							type="radio"
							name="in-school"
							value="4"
							hidden
						>
						<label for="in-school-5">4年</label>
						<input
							v-model.number="surveys.answer1"
							id="in-school-6"
							type="radio"
							name="in-school"
							value="5"
							hidden
						>
						<label for="in-school-6">≥5年</label>
					</div>
				</div>
				<div class="out-school">
					<div class="out-school-title">Q2. 校外学了几年英语</div>
					<div class="out-school-list">
						<input
							v-model.number="surveys.answer2"
							id="out-school-1"
							type="radio"
							name="out-school"
							value="0"
							hidden
						>
						<label for="out-school-1">没学过</label>
						<input
							v-model.number="surveys.answer2"
							id="out-school-2"
							type="radio"
							name="out-school"
							value="1"
							hidden
						>
						<label for="out-school-2">1年</label>
						<input
							v-model.number="surveys.answer2"
							id="out-school-3"
							type="radio"
							name="out-school"
							value="2"
							hidden
						>
						<label for="out-school-3">2年</label>
						<input
							v-model.number="surveys.answer2"
							id="out-school-4"
							type="radio"
							name="out-school"
							value="3"
							hidden
						>
						<label for="out-school-4" style="margin-right: 0;">3年</label>
						<input
							v-model.number="surveys.answer2"
							id="out-school-5"
							type="radio"
							name="out-school"
							value="4"
							hidden
						>
						<label for="out-school-5">4年</label>
						<input
							v-model.number="surveys.answer2"
							id="out-school-6"
							type="radio"
							name="out-school"
							value="5"
							hidden
						>
						<label for="out-school-6">≥5年</label>
					</div>
				</div>
				<div class="submit" id="submitSurvey" @click="submitSurvey">提交资料</div>
			</div>
			<div class="class-time" v-show="status === 'class-time'">
				<div class="title">选择上课时间偏好</div>
				<div class="weeken">
					<input v-model.number="week" id="weeken-1" type="radio" name="weeken" value="2" hidden>
					<label for="weeken-1">每周2课</label>
					<input v-model.number="week" id="weeken-2" type="radio" name="weeken" value="3" hidden>
					<label for="weeken-2">每周3课</label>
				</div>
				<div class="frequency">
					<div class="class-frequency-title">每周上课频率</div>
					<div id="frequency" class="class-frequency-list">
						<input
							v-model="frequency"
							id="frequency-1"
							type="checkbox"
							name="frequency"
							value="d1"
							hidden
						>
						<label for="frequency-1">周一</label>
						<input
							v-model="frequency"
							id="frequency-2"
							type="checkbox"
							name="frequency"
							value="d2"
							hidden
						>
						<label for="frequency-2">周二</label>
						<input
							v-model="frequency"
							id="frequency-3"
							type="checkbox"
							name="frequency"
							value="d3"
							hidden
						>
						<label for="frequency-3">周三</label>
						<input
							v-model="frequency"
							id="frequency-4"
							type="checkbox"
							name="frequency"
							value="d4"
							hidden
						>
						<label for="frequency-4" style="margin-right: 0;">周四</label>
						<input
							v-model="frequency"
							id="frequency-5"
							type="checkbox"
							name="frequency"
							value="d5"
							hidden
						>
						<label for="frequency-5">周五</label>
						<input
							v-model="frequency"
							id="frequency-6"
							type="checkbox"
							name="frequency"
							value="d6"
							hidden
						>
						<label for="frequency-6">周六</label>
						<input
							v-model="frequency"
							id="frequency-7"
							type="checkbox"
							name="frequency"
							value="d7"
							hidden
						>
						<label for="frequency-7">周日</label>
					</div>
				</div>
				<div class="time">
					<div class="class-time-title">每次上课时段</div>
					<div class="class-time-title2">* 仅限周六日安排上午课程</div>
					<div class="class-time-list">
						<input v-model="time" id="time-1" type="checkbox" name="time" value="t1" hidden>
						<label for="time-1">08:40</label>
						<input v-model="time" id="time-2" type="checkbox" name="time" value="t2" hidden>
						<label for="time-2">09:20</label>
						<input v-model="time" id="time-3" type="checkbox" name="time" value="t3" hidden>
						<label for="time-3">10:00</label>
						<input v-model="time" id="time-4" type="checkbox" name="time" value="t4" hidden>
						<label for="time-4">10:40</label>
						<input v-model="time" id="time-5" type="checkbox" name="time" value="t5" hidden>
						<label for="time-5" style="margin-right: 0;">11:20</label>
						<input v-model="time" id="time-7" type="checkbox" name="time" value="t7" hidden>
						<label for="time-7">18:40</label>
						<input v-model="time" id="time-8" type="checkbox" name="time" value="t8" hidden>
						<label for="time-8">19:20</label>
						<input v-model="time" id="time-9" type="checkbox" name="time" value="t9" hidden>
						<label for="time-9">20:00</label>
						<input v-model="time" id="time-10" type="checkbox" name="time" value="t10" hidden>
						<label for="time-10">20:40</label>
					</div>
				</div>
				<div class="submit" id="submitClassTime" @click="submitTimeTable">确认</div>
			</div>
		</div>
	</div>
</template>

<script>
const account = new Account();
utils.initWechatShare({
  title: "【Qkids久趣】4-12岁，在家跟北美外教学英语，新用户100元体验！",
  desc: "严选北美外教在线授课，创造趣味十足的课堂体验，让孩子爱学更有效。",
  link: `${window.location.protocol}//${window.location.host}/wx`,
  imgUrl: "https://static-app.97kid.com/site-student/public/img/share.png"
});
utils.supportPromise(account);
export default {
  name: "Verify",
  data() {
    return {
      userInfo: {},
      status: "",
      surveys: {
        answer1: 0,
        answer2: 0
      },
      week: 2,
      frequencyList: [],
      timeList: []
    };
  },
  watch: {
    week() {
      this.frequencyList = this.frequency = this.timeList = this.time = [];
    }
  },
  computed: {
    age() {
      return this.userInfo.birthday
        ? `${utils.getAge(this.userInfo.birthday)}岁`
        : "请选择孩子年龄";
    },
    frequency: {
      get() {
        return this.frequencyList;
      },
      set(f) {
        if (f.length > this.week) f.shift();
        this.frequencyList = f;
      }
    },
    time: {
      get() {
        return this.timeList;
      },
      set(t) {
        if (t.length > this.week) t.shift();
        this.timeList = t;
      }
    }
  },
  mounted() {
    this.userStatus();
  },
  methods: {
    // 随机生成nickname
    randomName,
    // 判断用户状态
    async userStatus() {
      const userInfo = (this.userInfo = await account.$getUserInfo(true, true));
      console.log(userInfo);
      if (!userInfo.isPasswordSet || !userInfo.nickname || !userInfo.birthday) {
        // 有设置密码 但没用户资料 弹用户资料 但不弹密码
        this.status = "user-info";
      } else if (!(userInfo.survey || userInfo.level > 0)) {
        // 没有问卷调查 弹问卷调查
        this.status = "survey";
      } else if (!userInfo.timeTable) {
        // 没有上课时间 弹上课时间
        this.status = "class-time";
      } else {
        // 所有资料都齐全不显示弹窗
        this.status = "";
      }
      // this.status = "user-info";
    },
    // 提交用户信息
    async submitUserInfo() {
      const {
        nickname,
        birthday,
        gender,
        password,
        isPasswordSet
      } = this.userInfo;
      try {
        if (!nickname) throw Error("昵称不能为空");
        if (!birthday) throw Error("生日不能为空");
        await account.$ajax({
          type: "POST",
          path: `/s/user/`,
          data: { nickname, gender, birthday }
        });
        if (!isPasswordSet) {
          if (
            password.length >= 6 &&
            password.length <= 12 &&
            /^[0-9a-zA-Z]*$/.test(password)
          ) {
            await account.$ajax({
              type: "POST",
              path: `/s/user/password`,
              data: { password }
            });
          } else {
            utils.toast("密码格式不正确");
          }
        }
        await this.userStatus();
      } catch (err) {
        utils.toast(err.message ? err.message : err);
      }
    },
    // 提交问卷调查
    async submitSurvey() {
      try {
        await account.$ajax({
          type: "POST",
          path: `/s/surveys`,
          data: {
            ...this.userInfo,
            ...this.surveys
          }
        });
        await this.userStatus();
      } catch (err) {
        utils.toast(err.message ? err.message : err);
      }
    },
    // 提交时间偏好设置
    async submitTimeTable() {
      try {
        if (this.frequencyList.length !== this.week)
          throw Error(`请选择${this.week}节上课频率`);
        if (this.timeList.length <= 0 || this.timeList.length > this.week)
          throw Error("请选择上课时段");
        const data = {};
        this.frequencyList.forEach(frequency => {
          this.timeList.forEach(time => {
            data[`${frequency}_${time}`] = 1;
          });
        });
        await account.$ajax({
          type: "PUT",
          path: `/s/user/timeTable`,
          data
        });
        await this.userStatus();
      } catch (err) {
        utils.toast(err.message ? err.message : err);
      }
    }
  }
};
</script>
